import React from "react";
import { withRouter } from 'react-router-dom';
import { Form, Input, Button, message, Checkbox } from 'antd';
import './login.less'

const Login = (props) => {

      const onFinish = (values) => {
            // 保存信息到localStorage
            localStorage.setItem("userName", values.username);
            localStorage.setItem("passWord", values.password);

            // 已经登录直接跳转到首页
            props.history.push({ pathname: '/Home' });
            message.success("登录成功")
      };

      const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
      };

      return (
            <div className="login-page">
                  <div className="login-form">
                        <h1 style={{ color: '#ccc' }}>欢迎进入后台管理系统...</h1>
                        <Form
                              name="basic"
                              initialValues={{ remember: true }}
                              onFinish={onFinish}
                              onFinishFailed={onFinishFailed}
                              autoComplete="off"
                        >
                              <Form.Item
                                    label="Username"
                                    name="username"
                                    rules={[{ required: true, message: 'Please input your username!' }]}
                              >
                                    <Input />
                              </Form.Item>

                              <Form.Item
                                    label="Password"
                                    name="password"
                                    rules={[{ required: true, message: 'Please input your password!' }]}
                              >
                                    <Input.Password />
                              </Form.Item>

                              <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                                    <Checkbox>Remember me</Checkbox>
                              </Form.Item>

                              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button type="primary" htmlType="submit">
                                          Submit
                                    </Button>
                              </Form.Item>
                        </Form>
                  </div>
            </div>
      );
}
export default withRouter(Login);